<template>
    <div class="todayRecommend">
        <div class="today" v-for="(item, index) in recommend2.rem" :key="index" @click="goToLists(item.id)">
            <img :src="item.picUrl" alt="">
            <a href="#">
                {{ item.name }}
            </a>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { recommend } from '@/stores/recommend';
import { onMounted, nextTick } from 'vue';

const recommend2 = recommend()

const goToLists = (ids: number) => {
    router.push({
        name: 'recommendList',
        query: {
            id: ids
        }
    })
}

onMounted(async () => {
    await nextTick()
    await recommend2.getRecommend()
})
</script>

<style lang="scss" scoped>
.todayRecommend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    align-items: center;
    justify-items: center;
    margin-bottom: 20px;


    .today {
        width: 180px;
        height: 180px;
        border-radius: 10px;
        // background-color: black;
        position: relative;
        margin-top: 10px;
        margin-bottom: 60px;
        background-color: var(--imgColor);


        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            position: relative;
            cursor: pointer;

            &:hover {
                transition: all 1s linear;

            }
        }

        a {
            display: block;
            width: 100%;
            height: 40px;
            color: rgb(41, 41, 41);
            left: 0;

            &:hover {
                color: rgba(101, 99, 99, 0.833);
            }
        }
    }
}
</style>